<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入层架标签层架标签</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>
        .layui-input-block {
            padding: 0;
            margin: 0;
        }

        .layui-input-inline {
            padding: 0;
            margin: 0;
        }

        select {
            width: 300px;
        }

        .layui-form-select {
            width: 300px;
        }

        #cengRFID {
            width: 200px;
        }
    </style>
</head>
<body style="background-color: #2C3E50;">
<div style="background-color: white">
    <div class="layui-form" style="display: flex;justify-content: space-between;padding: 0;margin: 0;">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <select name="school" lay-filter="school">
                    <option value="请选择">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <select id="tag" name="tag" lay-filter="tag" style="width: 150px;">
                    <option value="请选择">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" id="cengRFID" name="cengRFID" placeholder="请用设备扫" disabled="disabled"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button id="scanCengRfid" class="layui-btn layui-btn-disabled ">扫描</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="start" class="layui-btn layui-btn-disabled">开始</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="btnStop" class="layui-btn ">停止</button>
            </div>
        </div>
    </div>
</div>
<table class="layui-table" id="Table" lay-filter="test" lay-data="{id: 'idTest'}">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
        <col width="100">
    </colgroup>
    <thead>
    <tr>
        <th lay-data="{field:'school', align:'center', width: 130}">学校</th>
        <th lay-data="{field:'tag', align:'center', width: 200}">层标名</th>
        <th lay-data="{field:'book', align:'center', width: 180}">书RFID</th>
        <th lay-data="{field:'bookName', align:'center'}">书名</th>
        <th lay-data="{field:'code', align:'center', width: 100}">条码</th>
        <th lay-data="{width:100, align:'center', toolbar: '#barDemo1',event:'delete'}">删除</th>
    </tr>
    </thead>
    <tbody>
    <!--<tr><td >贤心</td><td>2016-11-29</td><td ><button class="layui-btn">删除</button></td></tr>-->

    </tbody>
</table>
<div style="background: white;width: 100%;position: absolute;bottom: 0;left: 0;display: flex;justify-content: space-between;padding: 20px 0;font-size: 20px">
    <div>
        连接状态:<span id="status">断开连接</span>
    </div>
    <div>
        消息:<span id="message">socket连接断开！</span>
    </div>
    <div>
        当前层标绑定的书:<span id="cengBookRfid">0</span>
    </div>
</div>
<script>
    $("#scanCengRfid").click(function () {
        $("#scanCengRfid").addClass("layui-btn-disabled");
        index = layer.load(2, {shade: false});
        $.ajax({
            url: 'comScanOneRFID',
            success: function (res) {
                if (res.code == 0) {
                    $("#message").html("开启成功");
                    layer.close(index);
                    $("#scanCengRfid").removeClass("layui-btn-disabled");
                } else {
                    $("#message").html("开启失败");
                    layer.close(index);
                    $("#scanCengRfid").removeClass("layui-btn-disabled");
                }
            }
        });
    });
    $("#start").click(function () {
        if ($("select[name='tag']").val() == "请选择" || $("select[name='tag']").val() == "请选择" || $("#cengRFID").val() == "") {
            layer.alert("请选择或输入！");
            return false;
        }
        console.log("层架标签的=" + $("input[name='cengRFID']").val());
        $.ajax({
            url: 'startfindingBookShelf',
            async: false,
            data: {
                school: $("select[name='school']").val(),
                tag: $("select[name='tag']").val(),
                cengRFID: $("input[name='cengRFID']").val()
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#message").html("开启成功");
                    $("#scanCengRfid").addClass("layui-btn-disabled");
                } else {
                    $("#message").html("开启失败");
                }
            }
        });
    });


    $("#btnStop").click(function () {
        $.ajax({
            url: 'CloseRfidReaderDervice',
            success: function (res) {
                if (res.code == 0) {
                    $("#message").html("关闭成功");
                }
            },
            async: true
        });
    });
</script>
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="edit">删除</a>
</script>
<script>


    function addTr(d) {
        layui.use('table', function () {
            var table = layui.table;
            var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                laydate = layui.laydate;
            var oldDate = new Array();
            oldDate = table.cache.idTest;
            oldDate.reverse();
            oldDate.push(d);
            oldDate.reverse();
            table.reload('idTest', {
                data: oldDate
                , height: 500
            });
        });
    }

    //var d={tag:'4架A面3-4列（1-6层）G类',book:'E8888888E8888888',school:'大纲同城学校',bookName:'这本书的名字大概这么长',code:'1234567'};
    //addTr(d);
    function clearTable() {
        layui.use('table', function () {
            var table = layui.table;
            var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                laydate = layui.laydate;
            var oldDate = {};
            table.reload('idTest', {
                data: oldDate
            });
        });
    }
</script>
<script>

    layui.use('form', function () {
        var form = layui.form;
        form.on('select(school)', function (data) {
            $("#cengBookRfid").html(0);
            clearTable();
            $("input[name='cengRFID']").val("");
            $("#start").addClass("layui-btn-disabled");
            $.ajax({
                url: 'getTagListBySchool',
                async: false,
                data: {school: data.value},
                success: function (res) {
                    for (var i = 0; i < res.data.length; i++) {
                        console.log(res.data[i]);
                        $("select[name='tag']").append("<option value=" + res.data[i] + ">" + res.data[i] + "</option>");
                    }
                    layui.form.render();
                }
            });
        });
        layui.form.render();

        form.on('select(tag)', function (data) {
            $("#cengBookRfid").html(0);
            $("#scanCengRfid").removeClass("layui-btn-disabled");
            clearTable();
            $("input[name='cengRFID']").val("");
            $("#start").addClass("layui-btn-disabled");
            $.ajax({
                url: 'CloseRfidReaderDervice',
                async: false,
                data: {school: data.value},
                success: function (res) {

                }
            });
            layui.form.render();
        });
    })
</script>
<script>


    var cont = 0;
    var ip = "";
    var port = "";
    $.ajax({
        url: 'stopRead',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://localhost:8889/sokect");
    ws.onopen = function () {
        console.log("连接成功");
        $("#scanCengRfid").removeClass("layui-btn-disabled");
        $("#status").html("已连接");
        $("#message").html("已连接");
    }
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        if (msg.from == "findingBookShelf") {
            $("input[name='cengRFID']").val(msg.sUid);
            $("#scanCengRfid").removeClass("layui-btn-disabled");
            $("#message").html("已连接");
            if (msg.sUid != null || msg.sUid != "" || msg.sUid != undefined) {
                $("#start").removeClass("layui-btn-disabled");
            }
            cont = 0;
            $("#cengBookRfid").html("0");
        } else if (msg.from == "findingBookShelfBookRfid") {
            cont++;
            $("#cengBookRfid").html(cont);
            var d = {tag: msg.tag, book: msg.sUid, school: msg.school, bookName: msg.bookName, code: msg.bookCode};
            addTr(d);
        }
    };
    ws.onclose = function () {
        console.log("连接已关闭...");
        $("#scanCengRfid").addClass("layui-btn-disabled");
        $("#status").html("断开连接");
        $("#message").html("断开连接");
        $("#scanCengRfid").addClass("layui-btn-disabled");
        $("#start").addClass("layui-btn-disabled");
    };

</script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log("tr");
            //删除
            if (layEvent === 'delete') { //删除
                $.ajax({
                    type: "post",
                    url: "/deleteShelfByBookRfid",
                    data: {"book": data.book},
                    success: function (res) {
                        if (res == 1) {
                            layer.msg("删除成功！", {icon: 1});
                            obj.del();
                        } else {
                            layer.msg("发生错误！", {icon: 5})
                        }
                    }
                });
            }
        });
    });
</script>
<script>
    $.ajax({
        url: 'getSchoolList',
        async: false,
        success: function (res) {
            for (var i = 0; i < res.data.length; i++) {
                $("select[name='school']").append("<option value=" + res.data[i] + ">" + res.data[i] + "</option>");
            }
        }
    });
</script>

</body>
</html>